<template>
  <div class="home">
    <edit-bar
      :options="options"
      :style="style"
      v-show="options.length"
    ></edit-bar>
    <iframe
      class="iframe"
      ref="iframe"
      src="http://localhost:3000?mode=tplEdit"
      frameborder="0"
    ></iframe>
    <keep-alive>
      <component :is="componentName"></component>
    </keep-alive>
  </div>
</template>
<script>
import bus from '@/utils/bus'
import { throttle } from 'lodash-es'
import * as config from '@/editConfig'
import editBar from '@/components/editBar'
import TitleDialog from '@/components/titleDialog'
export default {
  name: 'Home',
  components: {
    editBar,
    HomeTitle: TitleDialog
  },
  data() {
    return {
      options: [],
      style: {
        top: 0,
        left: 0
      },
      componentName: '',
      emits: [],
      curModule: ''
    }
  },
  mounted() {
    const _this = this
    this.$refs.iframe.addEventListener('load', function () {
      let scrollTop = 0
      let target = null
      this.contentWindow.addEventListener('click', function (e) {
        const editKey = e.target.getAttribute('data-edit')
        if (editKey) {
          target = e.target
          _this.style.top = target.offsetTop - scrollTop + 'px'
          _this.style.left = target.offsetLeft + 'px'
          _this.options = config[_this.curModule][editKey]

          console.log('target', target)
          console.log('options', _this.options)
          console.log('style', _this.style)
        }
      })
      this.contentWindow.addEventListener(
        'scroll',
        throttle(function () {
          scrollTop = this.document.documentElement.scrollTop
          if (target) _this.style.top = target.offsetTop - scrollTop + 'px'
        }, 100)
      )
    })

    // 监听 iframe 消息
    window.addEventListener('message', this.getDetail)
  },
  methods: {
    setComponentName(data) {
      this.componentName = data.componentName
    },
    getDetail(event) {
      console.log('event', event)
      if (event.origin === 'http://localhost:3000') {
        console.log('来自 iframe 的消息：', event.data)
        const { module } = event.data
        this.curModule = module
        this.handleOpenListen()
        // 在此调用 vuex 全局写好的获取模板数据的方法（按模块存），在各个组件中根据 data-edit 获取对应的数据
      }
    },
    handleOpenListen() {
      // 移除监听
      for (const item of this.emits) {
        bus.$off(item.emit, this.setComponentName)
      }
      // 开启该页面全部监听
      this.emits = Object.values(config[this.curModule])
        .flat()
        .filter((o) => o.emit)
      for (const item of this.emits) {
        console.log(item)
        bus.$on(item.emit, this.setComponentName)
      }
    }
  },
  beforeDestroy() {
    for (const item of this.emits) {
      bus.$off(item.emit, this.setComponentName)
    }
    window.removeEventListener('message', this.getDetail)
  }
}
</script>
<style lang="stylus">
html, body, #app {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.home {
  height 100%
}
.iframe {
  width: 100%;
  height: 100%;
}
</style>
